// 提供了一个能够显示xtx-message组件的方法 函数将来：导入可以直接使用，也可以在实例属性上

import { createVNode, render } from 'vue'
import xtxMessage from './xtx-message.vue'

const div = document.createElement('div')
div.setAttribute('class', 'xtx-message-container')
document.body.appendChild(div)

// 定时器标识
let timer = null

export default function ({ type, text }) {
  /*
    1、导入消息提示组件
    2、将消息提示组件编译为虚拟节点(dom节点)
    3、准备一个装载消息提示组件的容器
    4、将虚拟节点渲染在容器中
  */
  const vnode = createVNode(xtxMessage, { type, text }) // 参数1：组件 参数2：组件需要传递的参数
  render(vnode, div) // 参数1：虚拟节点 参数2：渲染至哪个容器

  // 3秒后就销毁组件
  clearTimeout(timer)
  timer = setTimeout(() => {
    render(null, div)
  }, 2000)
}
